<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<style type="text/css">
		.dropdown {
			height: 0;
			width: 0;
			overflow: hidden;
			border-color: #777 transparent transparent transparent;
			border-style: solid dashed dashed dashed;
			border-width: 5px;
		}

		.test1 {
			height: 20px;
			width: 20px;
			border-color: #d23f2a #ffc70b #2e77f7 #009756;
			border-style: solid;
			border-width: 20px;
		}

		.test2 {
			height: 0;
			width: 0;
			overflow: hidden;
			border-color: transparent transparent transparent #f00;
			border-style: dashed dashed dashed solid;
			border-width: 20px;
		}

		.test3 {
			height: 0;
			width: 0;
			overflow: hidden;
			border-color: transparent transparent #12ad2a transparent;
			border-style: dashed dashed solid dashed;
			border-width: 20px;
		}

		.test4 {
			height: 0;
			width: 0;
			overflow: hidden;
			border-color: #FF9600 transparent transparent transparent;
			border-style: solid dashed dashed dashed;
			border-width: 20px;
		}

		.test5 {
			height: 0;
			width: 0;
			overflow: hidden;
			border-color: #FF9600 #3366ff transparent transparent;
			border-style: solid solid dashed dashed;
			border-width: 40px 40px 0 0;
		}
	</style>
</head>

<body>
	<div style="margin:20px;">
		<div class="dropdown"></div>
		<br>

		<div class="test1"></div>
		<br>

		<div class="test2"></div>
		<br>

		<div class="test3"></div>
		<br>

		<div class="test4"></div>
		<br>

		<div class="test5"></div>
	</div>
</body>
</html>